import React from 'react';
import { Drawer as AntdDrawer } from 'antd';
import type { DrawerProps as AntdDrawerProps } from 'antd';
import { createStyles } from 'antd-style';

export interface DrawerProps extends AntdDrawerProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  drawer: css`
    .ant-drawer-content {
      border-radius: ${token.borderRadius}px;
    }
  `,
}));

const DrawerComponent: React.FC<DrawerProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const drawerClassName = cx(
    className,
    customClassName,
    styles.drawer
  );

  return <AntdDrawer className={drawerClassName} {...restProps} />;
};

const Drawer = Object.assign(DrawerComponent, {
  _InternalPanelDoNotUseOrYouWillBeFired: (AntdDrawer as any)._InternalPanelDoNotUseOrYouWillBeFired,
});

export { Drawer };
export default Drawer;

